/**
 * @功能描述: 气泡框样式
 * @author: lzn
 * @date: 2022-09-30 17:08:29
 * @version: 1.0
 */
@import '../../style/index.scss';

// 正上方气泡框的箭头容器定位
@mixin popover-top {
  left: 50%;
  bottom: 0;
  transform: translateY(100%) translate(-50%);
}

// 正上方气泡框箭头定位
@mixin popover-top-content {
  box-shadow: 3px 3px 7px #00000012;
  transform: translateY(-11px) rotate(45deg);
}


// 气泡框容器
@include b(popover) {
  position: absolute;
  z-index: calc($root-z-index + 30);
  padding-bottom: 15px;
}

// 气泡框主体容器
@include b(popover-content) {
  position: relative;
}

// 气泡框主体
@include b(popover-inner) {
  padding: 12px 16px;
  min-width: 150px;
  min-height: 50px;
  background-color: $color-white;
  background-clip: padding-box;
  border-radius: 2px;
  box-shadow: $box-shadow-base;
}

// 气泡框箭头容器
@include b(popover-arrow) {
  position: absolute;
  display: block;
  width: 22px;
  height: 22px;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  @include popover-top;
}

@include b(popover-arrow-content) {
  position: absolute;
  inset: 0;
  display: block;
  width: 11.3137085px;
  height: 11.3137085px;
  margin: auto;
  content: "";
  pointer-events: auto;
  border-radius: 0 0 2px;
  pointer-events: none;
  background-color: $color-white;
  @include popover-top-content;
}